<template>
  <div :class="clsx(className)" ref="wrapperRef" :style="styleObj">
    <div class="c-select relative box-content" :style="inputStyle">
      <div
        @click="foucs"
        :class="
          clsx(
            'c-input box-content',
            'c-input--suffix',
            status ? 'is-focus' : '',
          )
        "
        style="display: flex; gap: 24px; cursor: pointer;"
      >
        <span :class="clsx('c-input__inner flex relative')">
          {{ label?label:'请选择' }}
        </span>

        <span class="c-input__suffix">
          <span :class="clsx('c-input__suffix-inner')">
            <img
              :class="!hidden ? 'c-is-reverse' : 'c-is-init'"
              :src="down"
              alt=""
            />
          </span>
        </span>
      </div>
      <Dropdown
        ref="dropRef"
        :dropList="dropList"
        v-model="hidden"
        @changeValue="changeValue"
        :defaultValue="value"
      />
    </div>
  </div>
</template>
<script>
import clsx from 'clsx'
import Dropdown from './Dropdown.vue'
import down from './sj.png'
export default {
  props: {
    
    styleObj: {
      type: Object,
      default: () => {
        return {}
      },
    },
   
    defaultValue: {
      type: Object,
      default: () => {
        return null
      },
    },
    inputStyle: {
      type: Object,
      default: () => {
        return {}
      },
    },
    className: {
      type: String,
      default: '',
    },
    dropList:{
        type:Array,
        default:()=>[
       
        {
          label: '全省',
          value: 1,
        },
        {
          label: '长沙市',
          value: 2,
        }
      ]
    },
    value:{
        type:[String,Number],
        default:''
    }
  },
  model:{
    prop:'value',
    event:'change'
  },
  data() {
    return {
      down,
      clsx,
      status: false,
      hidden:true,
      label: null
    }
  },
  mounted () {
    let obj = this.dropList.find(res=>res.value === this.value)
    console.log(obj,'obj')
    if(obj) {
        this.label = obj.label
    }
  },
  methods: {
    foucs() {
      this.hidden = !this.hidden
     
    },
    blur() {
      // setStatus(false);
    },
    changeValue(item) {debugger
        this.label = item.label;
        // this.value = item.value
        this.$emit('changeValue',item)
        this.$emit('change',item.value)
    }
  },
  components: {
    Dropdown,
  },
}
</script>
<style>
@import './index.css';
</style>
